'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    TextInput,
    ActivityIndicator,
    Platform,
} from 'react-native';
import Global from '../Commom/GlobalConst';
import ImagePicker from 'react-native-image-picker';
import Toast from '../Utils/toast';
import UserAPIService from '../Commom/UserAPIService';
export default class FeedbackPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            avatarSource: require('../../Image/photo_input.png'),
            imagePath: '',
            inputContent: '',
            submitting: false,
        }
        this.closeKeybord = this.closeKeybord.bind(this);
    }

    closeKeybord() {
        TextInput.State.blurTextInput(TextInput.State.currentlyFocusedField());
    }

    componentDidMount() {

    }

    ClickAction(number) {
        switch (number) {
            case 0:
                var options = {
                    title: '头像编辑',
                    cancelButtonTitle: '取消',
                    takePhotoButtonTitle: '从相机拍照获取',
                    chooseFromLibraryButtonTitle: '从手机相册选择',
                    allowsEditing: true, // 当用户选择过照片之后是否允许再次编辑图片
                    maxWidth: 750,
                    maxHeight: 1280,
                    quality:0.75,
                };
                ImagePicker.showImagePicker(options, (response) => {
                    if (response.didCancel) {
                    }
                    else if (response.error) {
                    }
                    else if (response.customButton) {
                    }
                    else {
                        let source;
                        let url;
                        let path;
                        if (Platform.OS === 'android') {
                            url = response.uri;
                            source = {uri: url};
                            path = response.path;
                        } else {
                            url = response.uri.replace('file://', '');
                            source = {uri: url};
                            path = response.uri.replace('file://', '');
                        }
                        this.setState({
                            avatarSource: source,
                            imagePath: path,
                        });
                    }
                });
                break;
            case 1:
                if (!this.state.inputContent) {
                    Toast.show("请输入您的意见");
                    return;
                }
                this.setState({
                    submitting: true,
                });
                UserAPIService.feedback(Global.Const.token, Global.Const.registeredId, this.state.inputContent).then((ret)=> {
                    if (this.state.imagePath.length > 0) {
                        console.log(ret);
                        console.log(this.state.imagePath);
                        UserAPIService.feedbackImg(Global.Const.token, Global.Const.registeredId, ret, this.state.imagePath).then((ret)=> {
                            this.setState({
                                submitting: false,
                            });
                            Toast.show("发布成功");
                            this.props.navigator.pop();
                        }).catch((err)=> {
                            this.setState({
                                submitting: false,
                            });
                        });
                    } else {
                        this.setState({
                            submitting: false,
                        });
                        Toast.show("发布成功");
                        this.props.navigator.pop();
                    }
                }).catch((err)=> {
                    this.setState({
                        submitting: false,
                    });
                });
                break;
        }
    }

    BackAction() {
        this.props.navigator.pop();
    }


    render() {
        return (
            <TouchableOpacity activeOpacity={1} style={{flex: 1}} onPress={()=>this.closeKeybord()}>
                <View style={styles.container}>
                    <View style={{width:Global.Const.size.width,height:65,backgroundColor:'white'}}>

                        <View style={{marginTop:24,alignItems:'center'}}>

                            <View style={{width:21,height:21,position:'absolute',left:12,top:3}}>
                                <TouchableOpacity activeOpacity={0.5}
                                                  onPress={()=>this.BackAction()}>
                                    <Image style={{resizeMode:'contain',width:21,height:21}}
                                           source={require('../../Image/icon_back.png')}></Image>
                                </TouchableOpacity>
                            </View>
                            <Text style={{fontSize:20,color:Global.FontColor.DimGray}}>意见反馈</Text>
                        </View>
                    </View>
                    <View style={{width:Global.Const.size.width,height:280,backgroundColor:'white',marginTop:12}}>
                        <TextInput
                            style={{width:Global.Const.size.width,height:160,marginLeft:10,marginRight:10,fontSize:15}}
                            placeholder={'请写下您宝贵的意见或建议！'}
                            multiline={true}
                            textAlignVertical={'top'}
                            value={this.state.inputContent}
                            onChangeText={inputContent => this.setState({ inputContent })}
                            maxLength={180}
                            underlineColorAndroid={'white'}></TextInput>
                        <TouchableOpacity activeOpacity={0.5}
                                          onPress={()=>this.ClickAction(0)}>
                            <Image
                                style={{marginLeft:10,width:90,height:90,borderColor:Global.Const.transparent}}
                                source={this.state.avatarSource}></Image>
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity activeOpacity={0.5}
                                      onPress={()=>this.ClickAction(1)}>
                        <View
                            style={{marginTop:35,backgroundColor:'#24CD78',borderRadius:20, marginLeft:30,marginRight:30,marginBottom:10,width:Global.Const.size.width-60,height:40, alignItems:'center',justifyContent:'center'}}>
                            <Text style={{color:'white',fontSize:18}}>提交反馈</Text>
                        </View>
                    </TouchableOpacity>
                </View>
                {this.state.submitting ? <View
                    style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                    <View
                        style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                        <ActivityIndicator
                            animating={this.state.submitting}
                            style={{ alignItems: 'center',justifyContent: 'center'}}
                            size="large"/>
                        <Text style={{color:'white'}}>正在提交</Text>
                    </View>
                </View> : null}
            </TouchableOpacity>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: Global.Const.transparent,
    },
});